<template>
  <div>
    <div class="toplist">
      <p>
        <span>
          <van-icon name="arrow-left" style="margin-left:-50px" />
        </span>
      <span>二手房</span>
        <span @click="hj">发布</span>
      </p>
    </div>
      
    

     <div v-for="(val,i) in list" :key="i" class="tablis" >
      <li>
        <img :src="val.img" alt />
      </li>
      <div class="tab">
        <h3>{{val.listingTitle}}</h3>
        <p>{{val.detailAddress}}</p>
        <p>{{val.housingName}}</p>
        <p>{{val.sellingprice}}</p>
          <p>{{val.houseArea}}</p>
          <p>{{val.housetype}}</p>
      </div> 
     </div>
  </div>
</template>
<script>
import {ad} from "../api/user";
export default {
  data() {
    return {
  

      
      list: [],
      

     
     
      
     
     
     
    };
  },
  created() {
   
    this.getRentList();
   

  },
  methods: {
    getRentList() {
    ad().then(res => {
        this.list = res.data;
        console.log(res);
      });
    },
  hj(){
    this.$router.push("/fabu")
  }
    
   
   
   
   
  }
};
</script>
<style scoped="scss">
.toplist p {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding-top: 10px;
}
.toplist p input {
  width: 65%;
  height: 36px;
  border: solid 1px #ccc;
  border-radius: 10px;
}
.tablis {
  display: flex;
  margin-top: 10px;
}
.tablis li {
  width: 100px;
  height: 100px;
}
.tablis li img {
  width: 100%;
  height: 100%;
  margin-left: 20px;
  margin-top: 10px;
}
.tab {
  margin-left: 20px;
  margin-top: 10px;
}
.nav{
  width: 100%;
  height: auto;
}
</style>